<template>
	<view class="main setPassword-main">
		<NavigationBar title="支付密码" />
		<view class="scroll-wrap">
			<div class="cell">
				<view class="cell-item b-b">
					<text class="iconfont left-icon">&#xe668;</text>
					<input class="center-input" placeholder-class="placeholder" placeholder="请输入新密码" :password="password" />
					<text class="iconfont right-icon" v-if="!password" @click="password=!password">&#xe643;</text>
					<text class="iconfont right-icon" v-if="password" @click="password=!password">&#xe664;</text>
				</view>
				<view class="cell-item b-b">
					<text class="iconfont left-icon">&#xe668;</text>
					<input class="center-input" placeholder-class="placeholder" placeholder="请确认新密码" :password="confirmPassword" />
					<text class="iconfont right-icon" v-if="!confirmPassword" @click="confirmPassword=!confirmPassword">&#xe643;</text>
					<text class="iconfont right-icon" v-if="confirmPassword" @click="confirmPassword=!confirmPassword">&#xe664;</text>
				</view>
				<view class="cell-item b-b">
					<text class="iconfont left-icon">&#xe623;</text>
					<input class="center-input" placeholder-class="placeholder" placeholder="请输入验证码" />
					<text :class="['right-text',{'color-999':time<60}]" @click="startCountDownAction">{{timeStr}}</text>
				</view>
			</div>
			<view class="submit-btn-wrap">
				<view class="submit-btn flex-center" @click="submitAction">
					<text class="btn-text">提交</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import util from '@/static/js/util';
	export default {
		data() {
			return {
				password: true,
				confirmPassword: true,
				time: 60,
				timeStr: '获取验证码'
			};
		},
		methods: {
			submitAction() {
				util.goBack()
			},
			startCountDownAction() {
				const _this:any = this
				if(_this.time < 60) return
				_this.countDownAction()
			},
			countDownAction() {
				const _this:any = this
				_this.time = _this.time - 1
				_this.timeStr = `${_this.time}秒`
				setTimeout(()=> {
					if(_this.time>1) {
						_this.countDownAction()
					}else {
						_this.time = 60
						_this.timeStr = `重新获取`
					}

				},1000)
			}
		}
	}
</script>

<style lang="scss">
	@import  './setPassword.scss'
</style>
